﻿{extends file='main.tpl'}
{block name='title'}
    Recherche
{/block}
{block name='content'}

    <form id="searchForm">
        <fieldset class="criteriaFieldset">
            <legend>Recherche</legend>
            <input name="search" type="text" id="search" placeholder="Rechercher un t-shirt" value="{$search}" />
        </fieldset>
        <br />
        <fieldset class="criteriaFieldset" action="index.php" method="get">
            <legend>Critères</legend>
            <div class="criteriaInsideDiv">
                <div class="criteriaDiv">
                    <span class="criteriaSpan">Sexe</span>
                    <br />
                    <input id="radioHomme" type="radio" name="sexSearch" value="H" onclick="updateAllSex('H')" checked />
                    <label for="radioHomme">Homme</label>
                    <br />
                    <input id="radioFemme" type="radio" name="sexSearch" value="F" onclick="updateAllSex('F')" />
                    <label for="radioFemme">Femme</label>
                </div>

                <div class="criteriaDiv">
                    <span class="criteriaSpan">Couleur</span>
                    <br />
                    <input type="radio" name="color" id="colorRandom" onclick="updateAllColor('random')" value="random" checked />
                    <label for="colorRandom">Aléatoire</label>
                    <br />
                    <input type="radio" name="color" onclick="updateAllColor('red')" value="red" id="colorRed" />
                    <label for="colorRed">Rouge</label>
                    <br />
                    <input type="radio" name="color" onclick="updateAllColor('grey')" value="grey" id="colorGrey" />
                    <label for="colorGrey">Gris</label>
                    <br />
                    <input type="radio" name="color" onclick="updateAllColor('yellow')" value="yellow" id="colorYellow" />
                    <label for="colorYellow">Jaune</label>
                    <br />
                    <input type="radio" name="color" onclick="updateAllColor('blue')" value="blue" id="colorBlue" />
                    <label for="colorBlue">Bleu</label>
                    <br />
                    <input type="radio" name="color" onclick="updateAllColor('green')" value="green" id="colorGreen" />
                    <label for="colorGreen">Vert</label>
                    <br />
                </div>

                <div class="criteriaDiv">
                    <span class="criteriaSpan">Taille</span>
                    <br />
                    <input type="radio" name="size" onclick="updateAllSize('S')" id="sizeS" value="S" checked />
                    <label for="sizeS">S</label>
                    <br />
                    <input type="radio" name="size" onclick="updateAllSize('M')" id="sizeM" value="M" />
                    <label for="sizeM">M</label>
                    <br />
                    <input type="radio" name="size" onclick="updateAllSize('L')" id="sizeL" value="L" />
                    <label for="sizeL">L</label>
                    <br />
                    <input type="radio" name="size" onclick="updateAllSize('XL')" id="sizeXL" value="XL" />
                    <label for="sizeXL">XL</label>
                    <br />
                    <input type="radio" name="size" onclick="updateAllSize('XXL')" id="sizeXXL" value="XXL" />
                    <label for="sizeXXL">XXL</label>
                    <br />
                </div>

                <div class="criteriaDiv">
                    <span class="criteriaSpan">Prix Max</span>
                    <br />			
                    <input type="radio" name="price" id="prix1" value="15" />
                    <label for="prix1">15€</label>
                    <br />
                    <input type="radio" name="price" id="prix2" value="20" />
                    <label for="prix2">20€</label>
                    <br />
                    <input type="radio" name="price" id="prix3" value="25" />
                    <label for="prix3">25€</label>
                    <br />
                    <input type="radio" name="price" id="prix4" value="30" />
                    <label for="prix4">30€</label>
                    <br />
                    <input type="radio" name="price" id="prix5" value="40" checked />
                    <label for="prix5">40€</label>
                    <br />
                </div>

                <div class="criteriaDiv">
                    <span class="criteriaSpan">Marque</span>
                    <br />				
                    {foreach name=outer item=brand from=$brands}
                        <input type="checkbox" name="brand_{$brand}" id="brand_{$brand}" checked />
                        <label for="brand_{$brand}">{$brand}</label>
                        <br />
                    {/foreach}
                </div>

                <div class="criteriaDiv">
                    <span class="criteriaSpan">Matière</span>
                    <br />
                    <input type="checkbox" name="matiereCoton" id="matiereCoton" checked disabled />
                    <label for="matiereCoton">Coton</label>
                    <br />
                    <input type="checkbox" name="matierePoly" id="matierePoly" disabled />
                    <label for="matierePoly">Polyestere</label>
                    <br />
                    <span class="criteriaSpan">Col</span>
                    <br />
                    <input type="checkbox" name="colRond" id="colRond" checked disabled />
                    <label for="colRond">Rond</label>
                    <br />
                    <input type="checkbox" name="colEnV" id="colEnV" disabled />
                    <label for="colEnV">En V</label>
                    <br />
                </div>
            </div>


        </fieldset>

        <br />
        <div id="divBtnRechercher" >
            <input type="button" value="Rechercher" id="btnRechercher" onclick="quickSearch();" />
        </div>
        <br />
        <input type="hidden" name="page" value="search" />

    </form>

	
	<div id="searchProgress"><img alt="loading" src="img/loading.gif" /></div>
	<div id="searchResult"></div>


    <script type="text/javascript" src="pages/controller/js/search.js"></script>
    <script type="text/javascript">
		//JQuery main entry point
		$(document).ready(function() {
			$('#searchProgress').fadeTo(0,0);
			if($('#search').val() != "")
			{
				quickSearch();
			}
		});
    </script>

	
{/block}

